<!DOCTYPE html>
<html>
<head>
    <title>handsontable demo</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="handsontable.min.css">
    <link rel="stylesheet" href="handsontable.full.css">
    <!--    <script src="handsontable/jquery-1.12.1.js"></script>-->
    <script src="handsontable.full.js"></script>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="example"></div>
<input type="button" value="点击生成" onclick="change();">
<input type="button" value="获取HTML" onclick="obtain();">

<script>
    function obtain() {
        console.log($("#example").className, $("#example").html())
    }

    function change() {
        var data = [
            ['日期', '销售地点', '销售商品', '单价', '销量'],
            ['2017-01', '北京', '冰箱', '3399', 530],
            ['2017-01', '天津', '空调', '4299', 522],
            ['2017-01', '上海', '洗衣机', '1299', 544],
            ['2017-01', '广州', '彩电', '4599', 562],
            ['2017-01', '深圳', '热水器', '1099', 430],
            ['2017-02', '重庆', '笔记本电脑', '4999', 666],
            ['2017-02', '厦门', '油烟机', '2899', 438],
            ['2017-02', '青岛', '饮水机', '899', 620],
            ['2017-02', '大连', '手机', '1999', 500]
        ];

        function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
            if (prop == 'address') {//修改字体颜色
                td.style.color = '#32CD32';                                     //如果要添加其他样式，可以用以下写法                    //td.style = 'font-weight: bold;';
            } else if (prop == 'price') {
                //格式化价格数据
                td.innerText = value != null ? numbro(value).format('0.00') : "";
            } else if (prop == 'sales') {
                //右对齐
                td.style.textAlign = 'right';
                td.innerText = value != null ? numbro(value).format('0,0.00') : "";
            } else if (prop == 'del') {
                //添加自定义的图片，并给图片的chick添加事件
                var escaped = Handsontable.helper.stringify(value),
                    imgdel;

                imgdel = document.createElement('IMG');
                imgdel.src = "remove.png";
                imgdel.width = 20;
                imgdel.name = escaped;
                imgdel.style = 'cursor:pointer;';//鼠标移上去变手型
                Handsontable.dom.addEvent(imgdel, 'click', function (event) {
                    hot.alter("remove_row", row);//删除当前行
                });

                Handsontable.dom.empty(td);
                td.appendChild(imgdel);
                td.style.textAlign = 'center';//图片居中对齐
                return td;
            }
        }

        Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

        var hot = new Handsontable(document.getElementById('example'), {
            data: data,
            colHeaders: true, // 使用自定义列头
            rowHeaders: true,////当值为true时显示行头，当值为数组时，行头为数组的值
            colWidths: 150, // 设置所有列宽为150像素
            filters: true,
            //columnSorting: true,//当值为true时，表示启用排序插件
            sortIndicator: true,
            autoColumnSize: true,//当值为true且列宽未设置时，自适应列大小
            manualColumnResize: true,//当值为true时，允许拖动，当为false时禁止拖动
            undo: true,
            redo: true,
            wordWrap: true,//自动换行
            copyable: true,//是否允许键盘复制
            fillHandle: true,//是否允许拖动复制
            mergeCells: true,//合并单元格
            manualRowResize: true,//当值为true时，允许拖动，当为false时禁止拖动
            manualRowMove: true,//当值为true时，行可拖拽至指定行
            manualColumnMove: true,//当值为true时，列可拖拽移动到指定列
            renderAllRows: true,//是否呈现所有行
            allowInsertRow: true,
            allowInsertColumn: true,
            fixedColumnsLeft: 1, //固定左侧多少列不能水平滚动
            fixedRowsTop: 1,//固定顶部多少行不能垂直滚动
            manualColumnFreeze: true, //当值为true时，选中某 一列，右键菜单会出现freeze this column选项，该选项的作用是固定这一列不可水平滚动，并会将这一列移动到非固定列的前面。再次右键菜单会出现unfreeze this column，意思是取消该列的固定，并将其还原到初始位置。
            customBorders: true,//自定义边框设置,可数组定义
            //maxCols:3,//最大列数
            //maxRows:3,
            //minSpareRows:3,
            contextMenu: true,
            dropdownMenu: false,//表头筛选
            cells: function (row, col, prop) {//单元格渲染
                var cellProperties = {};
                cellProperties.renderer = "negativeValueRenderer";
                return cellProperties;
            },
        });
        //选择的始末位置
        hot.addHook("afterSelectionEnd", function (r, c, r2, c2) {
            //console.log(hot.toHtml())//返回选择的坐标
        });
        hot.addHook('afterOnCellMouseDown', function (event, coords) {

        });
        var a = hot.getInstance()
        console.log(a)
        var b = a.toHtml();
        console.log(b)
        // console.log(hot.getData())//显示的数据
        // console.log(hot.getSourceData())//所有数据
        // console.log(hot.getValue())//返回选定单元格的值
    }

    // }

</script>
</body>
</html>